
// function getFruitListByPage(pageIndex) {
//     $.ajax({
//         url: "fruit/list",
//         type: "post",
//         dataType: "json",
//         data: {
//             fname: $("#fruit").val(),
//             pageIndex: pageIndex,
//         },
//         success: function (res) {
//             console.log("后端响应数据res= ", res);
//             var resData = res.fruitList;
//             var listHtml = '';
//             resData.forEach((item, index) => {
//                 //    要用this的时候不要用箭头函数

//                 console.log('item= ', item);
//                 listHtml += ` <tr>
//                             <td>${item.fname}</td>
//                             <td>${item.fprice}</td>
//                             <td>${item.fstock}</td>
//                             <td>${item.fsite}</td>
//                             <td>
//                                 <button type="button" class="btn btn-info btn-sm" onclick="goDetail(1)">查看详情</button>
//                                 <button type="button" class="btn btn-warning btn-sm" data-target="myModal" onclick="">修改</button>
//                                 <button type="button" class="btn btn-danger btn-sm" data-id=${item.id}>删除</button>
//                             </td>

//                         </tr>`

//             });
//             $('tbody').html(listHtml)
//         },
//         error: function (err) {
//             console.log(err);

//         }
//     })
// }
// function renderPagination(totalPage, currentPage) {
//     const pagination = $(".pagination");
//     pagination.empty(); // 清空原有内容
//     var pageHtml = '';
//     // 上一页按钮
//     pageHtml+=` <li>
//                     <a href="#" aria-label="Previous">
//                         <span aria-hidden="true">&laquo;</span>
//                     </a>
//                 </li>`;
//     // 页码按钮，！！！动态创建的标签要用
//      js里的on("click","btn-del",function)方法来绑定事件时,
//      on()要绑定在父元素上，
//      可以在标签里的用onclick()来绑定事件，
//      下面这个应该是onclick位置写错了

//     for (let i = 1; i <= totalPage; i++) {
//         pageHtml+=`
//             <li><a href="#" onclick="getFruitListByPage(${i})">${i}</a></li>
//         `;
//     }

//     // 下一页按钮
//     pageHtml+=`
//         <li>
//             <a href="#" aria-label="Next">
//                 <span aria-hidden="true">&raquo;</span>
//             </a>
//         </li>
//     `;
//     pagination.html(pageHtml);

// }

// function getTotalPage() {
//     $.ajax({
//         url: "fruit/list",
//         type: "post",
//         dataType: "json",
//         data: {
//             fname: $("#fruit").val()
//         },
//         success: function (res) {
//             console.log("后端响应数据res= ", res);
//             var totalPage = res.totalPage;
//             var currentPage = 1;

//             // 渲染分页栏
//             renderPagination(totalPage, currentPage);

//             // 默认加载第一页数据
//             getFruitListByPage(currentPage);

//         },
//         error: function (err) {
//             console.log(err);

//         }
//     })
// }

// getTotalPage();

// getFruitListByPage(1);


// !!!值得学习的思维:当一个请求中已返回能拿到的数据在其他请求中需要再用到时
// 该做的是吧那个数据在有返回的请求中赋值保存到全局变量中，
// 而不是（自己想到的）再新建一个接口请求或者改接口返回的数据

var pageIndex = 1;  //当前页码,用变量存
var totalPage = 1;  //不需要再写一个getTotalPage的新函数，因为totalPage在同一个ajax请求中以变量返回了
var fruitListCurrentPage = [];  //当前页的水果列表
var updateId; //修改的id

function getFruitList(nowPage) {
    pageIndex = nowPage; //更新全局的当前页码，得到当前页码
    $.ajax({
        url: "fruit/list",
        type: "post",
        dataType: "json",
        data: {
            fname: $("#fruit").val(),
            pageIndex: nowPage, //当前页码
        },
        success: function (res) {
            console.log("后端响应数据res= ", res);
            fruitListCurrentPage = res.fruitList;
            var resData = res.fruitList;
            totalPage = res.totalPage;//更新总页数
            var listHtml = '';
            resData.forEach((item, index) => {
                //    要用this的时候不要用箭头函数

                console.log('item= ', item);
                listHtml += ` <tr>
                            <td>${item.fname}</td>
                            <td>${item.fprice}</td>
                            <td>${item.fstock}</td>
                            <td>${item.fsite}</td>
                            <td>
                                <button type="button" class="btn btn-info btn-sm" onclick="goDetail(1)">查看详情</button>
                                <button type="button" class="btn btn-warning btn-sm" data-target="myModal" onclick="updateFruit(${index})">修改</button>
                                <button type="button" class="btn btn-danger btn-sm" onclick="delFruit(${item.id})" data-id="${item.id}">删除</button>
                            </td>

                        </tr>`

            });
            $('tbody').html(listHtml)

            var pageHtml = '';
            pageHtml = `<li onclick="goBefore()">
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>`;
            // 遍历动态生成页码
            for (var i = 1; i <= res.totalPage; i++) {
                // 高亮时有active的class
                var activeClass = '';
                if (i == pageIndex) {
                    activeClass = 'active'
                }
                pageHtml += ` <li class="${activeClass}" onclick="getFruitList(${i})"><a href="#" >${i}</a></li>`
            }
            pageHtml += `<li onclick="goAfter()">
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>`;
            $('.pagination').html(pageHtml)


        },
        error: function (err) {
            console.log(err);

        }
    })
}

// 点上一页和下一页时没办法得到当前页码，所以需要再写新方法
function goBefore() {
    console.log("上一页");
    if (pageIndex - 1 >= 1) {
        pageIndex -= 1
    }
    getFruitList(pageIndex)
}
function goAfter() {
    //  if(pageIndex+1<=totalPage){
    //     pageIndex++
    // }
    if (pageIndex < totalPage) {
        pageIndex++
    }
    getFruitList(pageIndex)
}

function delFruit(id) {
    console.log("删除的水果id= " + id);
    var flag = confirm("确定要删除该条数据吗？")
    if (flag) {
        $.ajax({
            url: "fruit/delete",
            type: "post",
            dataType: "json",
            data: {
                // 注意：前后端的参数名要保持一致
                // 前端提交的字段名：username的页面获取值
                fruitId: id
            },
            success: function (res) {
                // res接收到的是Servlet里的JSONObject data
                // 前后端分割不同人开发时
                // 前端不知道后端返回的数据是什么样的数据结构时
                // 一定要先打印看下后端返回的数据结构
                console.log("后端响应数据res=", res);
                if (res.flag) {
                    // 解决了当删除的是 最后一页 的 唯一一条数据 时，
                    // 没自动跳转到有数据的上一页的bug
                    // 当删除的是 最后一页 的 唯一一条数据 时，删除后应该自动跳转到上一页
                    // （因为当前页已经没有数据可显示了）
                    var currentPageDataLength = fruitListCurrentPage.length; // 示例，具体看你的返回结构
                    // length有无错
                    var isLastPage = (pageIndex == totalPage);
                    var isOnlyOneRecord = (currentPageDataLength === 1);

                    if (isLastPage && isOnlyOneRecord) {
                        // 如果是最后一页，并且当前页只有这一条数据，删除后就无数据了，跳转到上一页
                        getFruitList(pageIndex - 1);
                    } else {
                        // 否则刷新当前页
                        getFruitList(pageIndex);
                    }
                    //前端同步更新表格数据——》remove或直接再请求渲染
                    // getFruitList(pageIndex);
                    // 不用remove溢出元素，因为用remove，当前页的pageSize条数可能会变少
                    alert("删除水果成功")
                }
                else {
                }

            },
            error: function (err) {
                console.log("删除水果失败", err);
            }
        })
    }
}

function updateFruit(index) {
    console.log("修改index= " + index);
    console.log("修改list= ", fruitListCurrentPage);
    var fruit = fruitListCurrentPage[index];  //获取当前行的数据
    updateId = fruit.id;

    //填充数据,有参设置，无参获取
    $("#fname").val(fruit.fname)
    $("#fprice").val(fruit.fprice)
    $("#fstock").val(fruit.fstock)
    $("#fsite").val(fruit.fsite)

    $('#myModal').modal('show');  //先填充数据，再显示弹窗
    // 不会有一弹出为空，后面才有数据的情况
}

function confirmUpdate() {
    //先获取用户修改后的数据
    var fname = $("#fname").val()
    var fprice = $("#fprice").val()
    var fstock = $("#fstock").val()
    var fsite = $("#fsite").val()

    if (!fname || !fprice || !fstock || !fsite) {
        alert("水果信息不能为空");
        return;
    }
    $.ajax({
        url: "fruit/update",
        type: "post",
        dataType: "json",
        data: {
            id: updateId,
            fname: fname,
            fprice: fprice,
            fstock: fstock,
            fsite: fsite
        },
        success: function (res) {
            console.log("后端响应数据= " ,res);
            if(res.flag){
                alert("修改成功")
                // 修改完重新渲染数据
                getFruitList(pageIndex)
                $("#myModal").modal("hide")
            }
            
        },
        error: function (err) {
            console.log("修改失败", err);
        }
    })

}

// 调用方法在定义的前或后都可以
getFruitList(pageIndex)

// 补输入查询的调用